<script lang="ts" setup>
import type { TasksApi } from '#/api/spa/tasks';
import type { Rule } from 'ant-design-vue/es/form';

import { useVbenModal } from '@vben/common-ui';
import { Tinymce as RichTextarea } from '#/components/tinymce';
import { ImageUpload, FileUpload } from '#/components/upload';
import {
  message,
  Tabs,
  Form,
  Input,
  Textarea,
  Select,
  RadioGroup,
  Radio,
  CheckboxGroup,
  Checkbox,
  DatePicker,
  TreeSelect,
} from 'ant-design-vue';

import { computed, ref } from 'vue';
import { $t } from '#/locales';
import { getTasks, createTasks, updateTasks } from '#/api/spa/tasks';

import { getRangePickerDefaultProps } from '#/utils';
const emit = defineEmits(['success']);

const formRef = ref();
const formData = ref<Partial<TasksApi.Tasks>>({
  id: undefined,
  technicianId: undefined,
  projectName: undefined,
  status: undefined,
  roomNumber: undefined,
  duration: undefined,
  dispatchMethod: undefined,
  handCardId: undefined,
  startTime: undefined,
  endTime: undefined,
  actualDuration: undefined,
});
const rules: Record<string, Rule[]> = {
  technicianId: [
    { required: true, message: '技师ID不能为空', trigger: 'blur' },
  ],
  projectName: [
    { required: true, message: '项目名称不能为空', trigger: 'blur' },
  ],
  status: [{ required: true, message: '任务状态不能为空', trigger: 'blur' }],
  roomNumber: [{ required: true, message: '房间号不能为空', trigger: 'blur' }],
  duration: [{ required: true, message: '应钟时长不能为空', trigger: 'blur' }],
  dispatchMethod: [
    { required: true, message: '派工方式不能为空', trigger: 'blur' },
  ],
};
const getTitle = computed(() => {
  return formData.value?.id
    ? $t('ui.actionTitle.edit', ['任务派工'])
    : $t('ui.actionTitle.create', ['任务派工']);
});

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    technicianId: undefined,
    projectName: undefined,
    status: undefined,
    roomNumber: undefined,
    duration: undefined,
    dispatchMethod: undefined,
    handCardId: undefined,
    startTime: undefined,
    endTime: undefined,
    actualDuration: undefined,
  };
  formRef.value?.resetFields();
};

const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    await formRef.value?.validate();
    modalApi.lock();
    // 提交表单
    const data = formData.value as TasksApi.Tasks;
    try {
      await (formData.value?.id ? updateTasks(data) : createTasks(data));
      // 关闭并提示
      await modalApi.close();
      emit('success');
      message.success({
        content: $t('ui.actionMessage.operationSuccess'),
        key: 'action_process_msg',
      });
    } finally {
      modalApi.unlock();
    }
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      resetForm();
      return;
    }
    // 加载数据
    let data = modalApi.getData<TasksApi.Tasks>();
    if (!data) {
      return;
    }
    if (data.id) {
      modalApi.lock();
      try {
        data = await getTasks(data.id);
      } finally {
        modalApi.unlock();
      }
    }
    formData.value = data;
  },
});
</script>

<template>
  <Modal :title="getTitle">
    <Form
      ref="formRef"
      :model="formData"
      :rules="rules"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 18 }"
    >
      <Form.Item label="技师ID" name="technicianId">
        <Input
          v-model:value="formData.technicianId"
          placeholder="请输入技师ID"
        />
      </Form.Item>
      <Form.Item label="项目名称" name="projectName">
        <Input
          v-model:value="formData.projectName"
          placeholder="请输入项目名称"
        />
      </Form.Item>
      <Form.Item label="任务状态" name="status">
        <RadioGroup v-model:value="formData.status">
          <Radio value="1">请选择字典生成</Radio>
        </RadioGroup>
      </Form.Item>
      <Form.Item label="房间号" name="roomNumber">
        <Input v-model:value="formData.roomNumber" placeholder="请输入房间号" />
      </Form.Item>
      <Form.Item label="应钟时长" name="duration">
        <Input v-model:value="formData.duration" placeholder="请输入应钟时长" />
      </Form.Item>
      <Form.Item label="派工方式" name="dispatchMethod">
        <Input
          v-model:value="formData.dispatchMethod"
          placeholder="请输入派工方式"
        />
      </Form.Item>
      <Form.Item label="关联手牌ID" name="handCardId">
        <Input
          v-model:value="formData.handCardId"
          placeholder="请输入关联手牌ID"
        />
      </Form.Item>
      <Form.Item label="开始时间" name="startTime">
        <DatePicker
          v-model:value="formData.startTime"
          valueFormat="x"
          placeholder="选择开始时间"
        />
      </Form.Item>
      <Form.Item label="结束时间" name="endTime">
        <DatePicker
          v-model:value="formData.endTime"
          valueFormat="x"
          placeholder="选择结束时间"
        />
      </Form.Item>
      <Form.Item label="实际时长" name="actualDuration">
        <Input
          v-model:value="formData.actualDuration"
          placeholder="请输入实际时长"
        />
      </Form.Item>
    </Form>
  </Modal>
</template>
